<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-08 19:32:45
-->
<template>
  <div id="main" style="height: 95%"></div>
</template>

<script>
import { Column } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    myChart() {
      let data = [
        {
          type: "张xx",
          sales: 813.8,
        },
        {
          type: "杨xx",
          sales: 794.98,
        },
        {
          type: "张x",
          sales: 763.78,
        },
        {
          type: "孙xx",
          sales: 758.38,
        },
        {
          type: "李xx",
          sales: 640.45,
        },
        {
          type: "王xx",
          sales: 549.62,
        },
        {
          type: "白x",
          sales: 512.62,
        },
      ];

      let columnPlot = new Column("main", {
        data,
        xField: "type",
        yField: "sales",
        label: {
          // 可手动配置 label 数据标签位置
          position: "middle", // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: "#FFFFFF",
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: "姓名",
          },
          sales: {
            alias: "时长（分钟）",
          },
        },
      });
      columnPlot.render();
    },
  },
  created() {},
  mounted() {
    this.myChart();
  },
};
</script>


